
<script setup>
  import {
    ref,
    reactive,
    computed,
    onBeforeMount,
    onMounted,
    onBeforeUpdate,
    onUpdated,
    onBeforeUnmount,
    onUnmounted,
    watch,
    watchEffect,
  } from 'vue';
  const num = ref(1)
  const item_number = reactive({
    num
  })
  const arr = reactive([ref('hello'), '223232', 3])
  const result = ref(0)
  const changeMsg = () => {
    result.value += item_number.num
  }
  const reset = () => {
    result.value = 0;
    item_number.num = 1
  }
  
  //计算属性
  const expectResult = computed(() => {
    return item_number.num + result.value
  })
  
  //侦听器
  watch((result, () => {
    console.log(result.value, 'watch监听执行');
  }))
  watch((item_number, () => {
    console.log(item_number.num, '深度监听执行');
  }), { deep: true })
  
  watchEffect((result, () => {
    console.log('watchEffect执行',result.value);
  }))
  
  onBeforeMount(() => { console.log('dom挂在之前'); })
  onMounted(() => { console.log('dom挂载完成'); })
  onBeforeUpdate(() => { console.log('数据更新之前调用'); })
  onUpdated(() => { console.log('数据更新之后'); })
  onBeforeUnmount(() => { console.log('组件销毁前'); })
  onUnmounted(() => { console.log('组建销毁完成'); })
  
  </script>
  
  <template>
    <div class="show-demo">
      <input v-model.number="item_number.num" />
      <button @click="changeMsg">点击增加</button>
      <button @click="reset">重置</button>
      <div class="result">结果：{{  result  }}</div>
      <div>增加的数量{{  item_number.num  }}</div>
      <div>预计结果：{{  expectResult  }}</div>
    </div>
  
    <div v-for="item in arr">{{  item  }}</div>
    <div>{{  arr[0].value  }}</div>
    <hr />
  
  </template>
  
  <style  lang="less" scoped>
  .show-demo {
    text-align: center;
    padding: 20px;
    margin-top: 30px;
  
    button {
      margin-left: 20px;
    }
  
    .result {
      margin-top: 20px;
      font-weight: 700;
    }
  }
  </style>
      